<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>网页版多段视频剪辑工具</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/ffmpeg/0.11.6/ffmpeg.min.js"></script>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'SF Pro Display', 'PingFang SC', 'Helvetica Neue', Arial,
          sans-serif;
      }

      :root {
        --primary-bg: #e6e7ee;
        --secondary-bg: #ffffff;
        --shadow-light: #ffffff;
        --shadow-dark: #d1d9e6;
        --accent-color: #667eea;
        --accent-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        --success-color: #4ecdc4;
        --danger-color: #ff6b6b;
        --warning-color: #feca57;
        --text-primary: #2d3748;
        --text-secondary: #718096;
        --glass-bg: rgba(255, 255, 255, 0.25);
        --glass-border: rgba(255, 255, 255, 0.18);
      }

      body {
        background: var(--primary-bg);
        color: var(--text-primary);
        min-height: 100vh;
        padding: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: all 0.3s ease;
        animation: pageLoad 0.8s ease;
      }

      @keyframes pageLoad {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .container {
        width: 100%;
        max-width: 1200px;
        background: var(--primary-bg);
        border-radius: 30px;
        padding: 40px;
        box-shadow: 20px 20px 60px var(--shadow-dark),
          -20px -20px 60px var(--shadow-light);
        margin-top: 20px;
        transition: all 0.3s ease;
        animation: containerFloat 1s ease 0.2s both;
      }

      @keyframes containerFloat {
        from {
          opacity: 0;
          transform: translateY(30px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .container:hover {
        box-shadow: 25px 25px 70px var(--shadow-dark),
          -25px -25px 70px var(--shadow-light);
      }

      /* 拟态风格卡片 */
      .neumorphic-card {
        background: var(--primary-bg);
        border-radius: 25px;
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
        transition: all 0.3s ease;
      }

      .neumorphic-inset {
        background: var(--primary-bg);
        border-radius: 20px;
        box-shadow: inset 8px 8px 16px var(--shadow-dark),
          inset -8px -8px 16px var(--shadow-light);
        transition: all 0.3s ease;
      }

      /* 玻璃态效果 */
      .glass-effect {
        background: var(--glass-bg);
        backdrop-filter: blur(10px);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
      }

      header {
        text-align: center;
        margin-bottom: 40px;
        padding: 30px;
        background: var(--primary-bg);
        border-radius: 25px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        animation: headerSlide 0.8s ease 0.4s both;
      }

      @keyframes headerSlide {
        from {
          opacity: 0;
          transform: translateY(-30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      h1 {
        font-size: 3.2rem;
        margin-bottom: 15px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-weight: 700;
        animation: titleGlow 3s ease-in-out infinite alternate;
      }

      @keyframes titleGlow {
        from {
          filter: brightness(1);
        }
        to {
          filter: brightness(1.2);
        }
      }

      .subtitle {
        font-size: 1.3rem;
        color: var(--text-secondary);
        margin-bottom: 30px;
        font-weight: 500;
      }

      .panels {
        display: flex;
        gap: 30px;
        margin-bottom: 40px;
        animation: panelsSlide 0.8s ease 0.6s both;
      }

      @keyframes panelsSlide {
        from {
          opacity: 0;
          transform: translateX(-20px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .panel {
        flex: 1;
        background: var(--primary-bg);
        border-radius: 25px;
        padding: 30px;
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent
        );
        transition: left 0.8s;
      }

      .panel:hover::before {
        left: 100%;
      }

      .panel:hover {
        transform: translateY(-5px);
        box-shadow: 16px 16px 32px var(--shadow-dark),
          -16px -16px 32px var(--shadow-light);
      }

      .panel-title {
        font-size: 1.6rem;
        margin-bottom: 25px;
        color: var(--accent-color);
        display: flex;
        align-items: center;
        font-weight: 600;
      }

      .panel-title::before {
        content: attr(data-icon);
        margin-right: 12px;
        font-size: 1.8rem;
        animation: iconBounce 2s ease-in-out infinite;
      }

      @keyframes iconBounce {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.1);
        }
      }

      .file-upload {
        border: 3px dashed var(--accent-color);
        border-radius: 25px;
        padding: 50px 40px;
        text-align: center;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        margin-bottom: 25px;
        cursor: pointer;
        background: var(--primary-bg);
        box-shadow: inset 8px 8px 16px var(--shadow-dark),
          inset -8px -8px 16px var(--shadow-light);
        position: relative;
        overflow: hidden;
      }

      .file-upload::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: var(--accent-gradient);
        border-radius: 25px;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: -1;
      }

      .file-upload::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        background: radial-gradient(
          circle,
          rgba(102, 126, 234, 0.1) 0%,
          transparent 70%
        );
        border-radius: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.6s ease;
        pointer-events: none;
      }

      .file-upload:hover {
        border-color: var(--success-color);
        transform: translateY(-5px) scale(1.02);
        box-shadow: inset 10px 10px 20px var(--shadow-dark),
          inset -10px -10px 20px var(--shadow-light),
          0 15px 40px rgba(102, 126, 234, 0.25), 0 5px 15px rgba(0, 0, 0, 0.1);
      }

      .file-upload:hover::before {
        opacity: 0.1;
      }

      .file-upload:hover::after {
        width: 300px;
        height: 300px;
      }

      .file-upload.dragover {
        border-color: var(--success-color);
        background: rgba(78, 205, 196, 0.05);
        transform: scale(1.05);
        box-shadow: inset 12px 12px 24px var(--shadow-dark),
          inset -12px -12px 24px var(--shadow-light),
          0 20px 50px rgba(78, 205, 196, 0.3);
        animation: dragPulse 1s ease-in-out infinite;
      }

      @keyframes dragPulse {
        0%,
        100% {
          border-color: var(--success-color);
        }
        50% {
          border-color: var(--accent-color);
        }
      }

      .file-upload-content {
        position: relative;
        z-index: 1;
      }

      .file-upload-icon {
        font-size: 3.5rem;
        margin-bottom: 20px;
        display: block;
        animation: iconFloat 3s ease-in-out infinite;
        filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.2));
      }

      @keyframes iconFloat {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-10px);
        }
      }

      .file-upload-text {
        font-size: 1.4rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 10px;
        background: var(--accent-gradient);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      .file-upload-subtext {
        font-size: 1.1rem;
        color: var(--text-secondary);
        margin-bottom: 20px;
        font-weight: 500;
      }

      .file-upload-formats {
        font-size: 0.9rem;
        color: var(--accent-color);
        font-weight: 500;
        padding: 8px 16px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 20px;
        display: inline-block;
        margin-bottom: 20px;
      }

      .file-upload input[type='file'] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        opacity: 0;
        cursor: pointer;
        z-index: 2;
      }

      .video-preview {
        width: 100%;
        background: var(--primary-bg);
        border-radius: 20px;
        overflow: hidden;
        margin-top: 20px;
        box-shadow: inset 10px 10px 20px var(--shadow-dark),
          inset -10px -10px 20px var(--shadow-light);
        transition: all 0.3s ease;
      }

      .video-preview:hover {
        box-shadow: inset 12px 12px 24px var(--shadow-dark),
          inset -12px -12px 24px var(--shadow-light);
      }

      video {
        width: 100%;
        max-height: 300px;
        display: block;
        border-radius: 15px;
      }

      .segment-form {
        display: flex;
        gap: 20px;
        margin-bottom: 25px;
        flex-wrap: wrap;
        align-items: flex-end;
      }

      .form-group {
        flex: 1;
        min-width: 150px;
      }

      label {
        display: block;
        margin-bottom: 10px;
        color: var(--text-secondary);
        font-weight: 500;
        font-size: 0.95rem;
      }

      input {
        width: 100%;
        padding: 14px 18px;
        background: var(--primary-bg);
        border: none;
        border-radius: 15px;
        color: var(--text-primary);
        font-size: 1rem;
        font-weight: 500;
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
        transition: all 0.3s ease;
      }

      input:focus {
        outline: none;
        box-shadow: inset 8px 8px 16px var(--shadow-dark),
          inset -8px -8px 16px var(--shadow-light),
          0 0 0 3px rgba(102, 126, 234, 0.2);
      }

      button {
        background: var(--primary-bg);
        color: var(--text-primary);
        border: none;
        padding: 14px 28px;
        border-radius: 15px;
        cursor: pointer;
        font-weight: 600;
        transition: all 0.3s ease;
        font-size: 1rem;
        flex-shrink: 0;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
        position: relative;
        overflow: hidden;
      }

      button::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent
        );
        transition: left 0.5s;
      }

      button:hover::before {
        left: 100%;
      }

      button:hover {
        transform: translateY(-3px);
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light);
      }

      button:active {
        transform: translateY(0);
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
      }

      button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
      }

      .btn-primary {
        background: var(--accent-gradient);
        color: white;
        padding: 16px 32px;
        font-size: 1.1rem;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .btn-primary:hover {
        box-shadow: 12px 12px 24px var(--shadow-dark),
          -12px -12px 24px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2),
          0 0 30px rgba(102, 126, 234, 0.3);
      }

      .btn-danger {
        background: linear-gradient(
          135deg,
          var(--danger-color) 0%,
          #ee5a52 100%
        );
        color: white;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .btn-success {
        background: linear-gradient(
          135deg,
          var(--success-color) 0%,
          #44a08d 100%
        );
        color: white;
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
      }

      .segments-list {
        background: var(--primary-bg);
        border-radius: 20px;
        padding: 20px;
        max-height: 250px;
        overflow-y: auto;
        margin-bottom: 25px;
        box-shadow: inset 10px 10px 20px var(--shadow-dark),
          inset -10px -10px 20px var(--shadow-light);
      }

      .segments-list::-webkit-scrollbar {
        width: 8px;
      }

      .segments-list::-webkit-scrollbar-track {
        background: var(--primary-bg);
        border-radius: 10px;
      }

      .segments-list::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 10px;
      }

      .segment-item {
        display: flex;
        justify-content: space-between;
        padding: 16px 20px;
        background: var(--primary-bg);
        border-radius: 15px;
        margin-bottom: 12px;
        align-items: center;
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
        transition: all 0.3s ease;
        animation: segmentSlideIn 0.5s ease;
      }

      @keyframes segmentSlideIn {
        from {
          opacity: 0;
          transform: translateX(-20px) scale(0.95);
        }
        to {
          opacity: 1;
          transform: translateX(0) scale(1);
        }
      }

      .segment-item:hover {
        transform: translateY(-2px);
        box-shadow: 8px 8px 16px var(--shadow-dark),
          -8px -8px 16px var(--shadow-light);
      }

      .segment-item:last-child {
        margin-bottom: 0;
      }

      .segment-times {
        font-weight: 600;
        color: var(--accent-color);
        font-size: 1.05rem;
      }

      .segment-actions button {
        padding: 8px 16px;
        font-size: 0.9rem;
        background: linear-gradient(
          135deg,
          var(--danger-color) 0%,
          #ee5a52 100%
        );
        color: white;
        box-shadow: 4px 4px 8px var(--shadow-dark),
          -4px -4px 8px var(--shadow-light);
      }

      .progress-container {
        margin: 30px 0;
        animation: progressSlide 0.8s ease 0.8s both;
      }

      @keyframes progressSlide {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .progress-bar {
        height: 16px;
        background: var(--primary-bg);
        border-radius: 20px;
        overflow: hidden;
        margin-bottom: 15px;
        box-shadow: inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);
        position: relative;
      }

      .progress-fill {
        height: 100%;
        background: var(--accent-gradient);
        width: 0%;
        transition: width 0.3s ease;
        border-radius: 20px;
        box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
        position: relative;
        overflow: hidden;
      }

      .progress-fill::after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.3),
          transparent
        );
        animation: progressShine 2s infinite;
      }

      @keyframes progressShine {
        0% {
          left: -100%;
        }
        100% {
          left: 100%;
        }
      }

      .progress-text {
        text-align: center;
        font-size: 1rem;
        color: var(--text-secondary);
        font-weight: 500;
      }

      .actions {
        display: flex;
        justify-content: center;
        gap: 25px;
        margin-top: 30px;
        animation: actionsSlide 0.8s ease 1s both;
      }

      @keyframes actionsSlide {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .result-panel {
        text-align: center;
        animation: resultPanelSlide 0.8s ease 1.2s both;
      }

      @keyframes resultPanelSlide {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .status-message {
        min-height: 35px;
        margin: 20px 0;
        color: var(--accent-color);
        font-weight: 600;
        font-size: 1.1rem;
        transition: all 0.3s ease;
      }

      .status-message.processing {
        animation: statusPulse 1.5s ease-in-out infinite;
      }

      @keyframes statusPulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.6;
        }
      }

      .error-message {
        color: var(--danger-color);
        margin: 20px 0;
        min-height: 35px;
        font-weight: 600;
        font-size: 1.1rem;
        animation: errorShake 0.5s ease;
      }

      @keyframes errorShake {
        0%,
        100% {
          transform: translateX(0);
        }
        25% {
          transform: translateX(-5px);
        }
        75% {
          transform: translateX(5px);
        }
      }

      .instructions {
        background: var(--primary-bg);
        border-radius: 25px;
        padding: 30px;
        margin-top: 40px;
        box-shadow: 10px 10px 20px var(--shadow-dark),
          -10px -10px 20px var(--shadow-light);
        animation: instructionsSlide 0.8s ease 1.4s both;
      }

      @keyframes instructionsSlide {
        from {
          opacity: 0;
          transform: translateY(30px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .instructions h3 {
        color: var(--accent-color);
        margin-bottom: 20px;
        font-size: 1.4rem;
        font-weight: 600;
      }

      .instructions ol {
        padding-left: 25px;
        margin-bottom: 20px;
      }

      .instructions li {
        margin-bottom: 12px;
        line-height: 1.7;
        color: var(--text-secondary);
        font-weight: 500;
      }

      .instructions p {
        color: var(--text-secondary);
        font-style: italic;
        font-weight: 500;
        padding: 15px;
        background: rgba(102, 126, 234, 0.1);
        border-radius: 15px;
        border-left: 4px solid var(--accent-color);
      }

      footer {
        margin-top: 40px;
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.95rem;
        padding: 25px;
        background: var(--primary-bg);
        border-radius: 20px;
        box-shadow: 6px 6px 12px var(--shadow-dark),
          -6px -6px 12px var(--shadow-light);
        animation: footerFade 0.8s ease 1.6s both;
      }

      @keyframes footerFade {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* 响应式设计 */
      @media (max-width: 1024px) {
        .container {
          padding: 30px;
          margin: 15px;
        }

        .panels {
          gap: 20px;
        }

        .panel {
          padding: 25px;
        }

        h1 {
          font-size: 2.8rem;
        }
      }

      @media (max-width: 768px) {
        body {
          padding: 15px;
        }

        .container {
          padding: 20px;
          margin: 5px;
          border-radius: 20px;
        }

        header {
          padding: 20px;
          margin-bottom: 25px;
        }

        .panels {
          flex-direction: column;
          gap: 20px;
        }

        .panel {
          padding: 20px;
        }

        .segment-form {
          flex-direction: column;
          align-items: stretch;
          gap: 15px;
        }

        .actions {
          flex-direction: column;
          align-items: center;
          gap: 15px;
        }

        h1 {
          font-size: 2.4rem;
        }

        .subtitle {
          font-size: 1.1rem;
        }

        .panel-title {
          font-size: 1.4rem;
        }

        .file-upload {
          padding: 35px 25px;
        }

        .file-upload-icon {
          font-size: 3rem;
          margin-bottom: 15px;
        }

        .file-upload-text {
          font-size: 1.2rem;
        }

        .file-upload-subtext {
          font-size: 1rem;
          margin-bottom: 15px;
        }

        .file-upload-formats {
          font-size: 0.85rem;
          margin-bottom: 15px;
        }

        button {
          padding: 12px 24px;
          font-size: 0.95rem;
        }

        .btn-primary {
          padding: 14px 28px;
          font-size: 1rem;
        }

        .segments-list {
          max-height: 200px;
        }

        .segment-item {
          flex-direction: column;
          align-items: flex-start;
          gap: 10px;
        }

        .segment-actions {
          align-self: flex-end;
        }

        .instructions {
          padding: 20px;
        }
      }

      @media (max-width: 480px) {
        body {
          padding: 10px;
        }

        .container {
          padding: 15px;
          margin: 0;
          border-radius: 15px;
        }

        header {
          padding: 15px;
          margin-bottom: 20px;
          border-radius: 15px;
        }

        h1 {
          font-size: 2rem;
        }

        .subtitle {
          font-size: 1rem;
        }

        .panel {
          padding: 15px;
          border-radius: 15px;
        }

        .panel-title {
          font-size: 1.2rem;
          margin-bottom: 15px;
        }

        .panel-title::before {
          font-size: 1.4rem;
          margin-right: 8px;
        }

        .file-upload {
          padding: 25px 20px;
          border-radius: 20px;
        }

        .file-upload-icon {
          font-size: 2.5rem;
          margin-bottom: 12px;
        }

        .file-upload-text {
          font-size: 1.1rem;
          margin-bottom: 8px;
        }

        .file-upload-subtext {
          font-size: 0.9rem;
          margin-bottom: 12px;
        }

        .file-upload-formats {
          font-size: 0.75rem;
          margin-bottom: 12px;
          padding: 6px 12px;
        }

        button {
          padding: 10px 20px;
          font-size: 0.9rem;
          border-radius: 12px;
        }

        .btn-primary {
          padding: 12px 24px;
          font-size: 0.95rem;
        }

        input {
          padding: 12px 16px;
          font-size: 0.95rem;
          border-radius: 12px;
        }

        .video-preview {
          border-radius: 15px;
        }

        video {
          max-height: 200px;
          border-radius: 12px;
        }

        .segments-list {
          padding: 15px;
          border-radius: 15px;
          max-height: 180px;
        }

        .segment-item {
          padding: 12px 15px;
          border-radius: 12px;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }

        .segment-times {
          font-size: 0.95rem;
        }

        .segment-actions button {
          padding: 6px 12px;
          font-size: 0.8rem;
        }

        .progress-bar {
          height: 12px;
        }

        .instructions {
          padding: 15px;
          border-radius: 15px;
        }

        .instructions h3 {
          font-size: 1.2rem;
        }

        .instructions li {
          font-size: 0.9rem;
        }

        footer {
          padding: 15px;
          border-radius: 15px;
          font-size: 0.85rem;
        }
      }

      /* 暗色模式支持 */
      @media (prefers-color-scheme: dark) {
        :root {
          --primary-bg: #2d3748;
          --secondary-bg: #1a202c;
          --shadow-light: #4a5568;
          --shadow-dark: #1a202c;
          --text-primary: #f7fafc;
          --text-secondary: #a0aec0;
        }
      }

      /* 动画优化 */
      @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }

      /* 自定义滚动条 */
      ::-webkit-scrollbar {
        width: 12px;
      }

      ::-webkit-scrollbar-track {
        background: var(--primary-bg);
        border-radius: 10px;
      }

      ::-webkit-scrollbar-thumb {
        background: var(--accent-color);
        border-radius: 10px;
        border: 2px solid var(--primary-bg);
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--accent-gradient);
      }
    </style>
  </head>
  <body>
    <header>
      <h1>🎬 智能视频剪辑工具</h1>
      <p class="subtitle">
        基于 FFmpeg.wasm 技术 - 直接在浏览器中完成专业视频剪辑
      </p>
    </header>

    <div class="container">
      <div class="panels">
        <div class="panel">
          <h2 class="panel-title" data-icon="📁">1. 上传视频文件</h2>
          <div class="file-upload" id="fileDropArea">
            <input type="file" id="videoInput" accept="video/*,audio/*" />
            <div class="file-upload-content">
              <span class="file-upload-icon">🎬</span>
              <div class="file-upload-text">拖放视频文件到此处</div>
              <div class="file-upload-subtext">或点击此区域选择文件</div>
              <div class="file-upload-formats">
                支持 MP4, AVI, MOV, MKV, WebM 等格式
              </div>
            </div>
          </div>

          <div id="originalPreview" class="video-preview">
            <p
              style="
                text-align: center;
                padding: 60px 20px;
                color: var(--text-secondary);
                font-size: 1.1rem;
              "
            >
              📺 视频预览区
            </p>
          </div>
        </div>

        <div class="panel">
          <h2 class="panel-title" data-icon="✂️">2. 选择剪辑片段</h2>
          <div class="segment-form">
            <div class="form-group">
              <label for="startTime">⏰ 开始时间（秒）</label>
              <div style="display: flex; gap: 10px; align-items: flex-end">
                <input
                  type="number"
                  id="startTime"
                  min="0"
                  step="0.1"
                  value="0"
                  placeholder="0.0"
                  style="flex: 1"
                />
                <button
                  id="setCurrentTimeAsStart"
                  style="padding: 14px 16px; font-size: 0.9rem"
                >
                  📍 当前时间
                </button>
              </div>
            </div>

            <div class="form-group">
              <label for="endTime">⏱️ 结束时间（秒）</label>
              <div style="display: flex; gap: 10px; align-items: flex-end">
                <input
                  type="number"
                  id="endTime"
                  min="0"
                  step="0.1"
                  value="5"
                  placeholder="5.0"
                  style="flex: 1"
                />
                <button
                  id="setCurrentTimeAsEnd"
                  style="padding: 14px 16px; font-size: 0.9rem"
                >
                  📍 当前时间
                </button>
              </div>
            </div>

            <button id="addSegment">➕ 添加片段</button>
          </div>

          <h3
            style="
              margin-bottom: 15px;
              color: var(--text-primary);
              font-weight: 600;
            "
          >
            📋 已添加片段：
          </h3>
          <div class="segments-list" id="segmentsList">
            <p
              style="
                text-align: center;
                padding: 20px;
                color: var(--text-secondary);
                font-style: italic;
              "
            >
              📭 暂无添加的片段
            </p>
          </div>

          <div class="status-message" id="segmentStatus"></div>
          <div class="error-message" id="segmentError"></div>
        </div>
      </div>

      <div class="panel result-panel">
        <h2 class="panel-title" data-icon="🎬">3. 生成剪辑结果</h2>

        <div class="progress-container">
          <div class="progress-bar">
            <div class="progress-fill" id="progressFill"></div>
          </div>
          <div class="progress-text" id="progressText">🚀 准备就绪</div>
        </div>

        <div class="actions">
          <button id="processBtn" class="btn-primary" disabled>
            🎯 开始剪辑
          </button>
          <button id="downloadBtn" class="btn-primary" disabled>
            📥 下载结果
          </button>
          <button id="resetBtn">🔄 重置所有</button>
        </div>

        <div class="status-message" id="statusMessage"></div>
        <div class="error-message" id="errorMessage"></div>

        <div id="resultPreview" class="video-preview">
          <p
            style="
              text-align: center;
              padding: 60px 20px;
              color: var(--text-secondary);
              font-size: 1.1rem;
            "
          >
            🎞️ 剪辑结果预览区
          </p>
        </div>
      </div>

      <div class="instructions">
        <h3>📖 使用说明：</h3>
        <ol>
          <li>🎥 上传视频或音频文件（支持MP4、MOV、AVI、MP3等格式）</li>
          <li>⏰ 设置剪辑的开始时间和结束时间（单位：秒），点击"添加片段"</li>
          <li>📝 可添加多个不重叠的时间片段（系统会自动检测并阻止重叠片段）</li>
          <li>
            🎯 点击"开始剪辑"按钮处理视频（处理时间取决于视频大小和片段数量）
          </li>
          <li>📥 处理完成后点击"下载结果"保存剪辑后的视频</li>
        </ol>
        <p>
          🔒
          注意：本工具完全在浏览器中运行，不会上传您的视频文件，确保隐私安全。
        </p>
      </div>
    </div>

    <footer>
      <p>
        ⚡ 基于 FFmpeg.wasm 技术实现 | 🌐 完全在浏览器中运行 | 🔐
        无需上传到服务器
      </p>
      <p>© 2025 智能视频剪辑工具</p>
    </footer>

    <script>
      // FFmpeg实例
      let ffmpeg = null
      let inputFile = null
      let videoUrl = null
      let outputBlob = null
      let segments = []

      // DOM元素
      const videoInput = document.getElementById('videoInput')
      const startTimeInput = document.getElementById('startTime')
      const endTimeInput = document.getElementById('endTime')
      const addSegmentBtn = document.getElementById('addSegment')

      const segmentsList = document.getElementById('segmentsList')
      const segmentStatus = document.getElementById('segmentStatus')
      const segmentError = document.getElementById('segmentError')
      const processBtn = document.getElementById('processBtn')
      const downloadBtn = document.getElementById('downloadBtn')
      const resetBtn = document.getElementById('resetBtn')
      const statusMessage = document.getElementById('statusMessage')
      const errorMessage = document.getElementById('errorMessage')
      const progressFill = document.getElementById('progressFill')
      const progressText = document.getElementById('progressText')
      const originalPreview = document.getElementById('originalPreview')
      const resultPreview = document.getElementById('resultPreview')

      // 页面加载动画
      window.addEventListener('DOMContentLoaded', () => {
        document.body.style.opacity = '0'
        setTimeout(() => {
          document.body.style.transition = 'opacity 0.5s ease'
          document.body.style.opacity = '1'
        }, 100)
      })

      // 初始化事件监听
      function initEvents() {
        // 文件上传处理
        videoInput.addEventListener('change', handleFileUpload)

        // 添加片段按钮
        addSegmentBtn.addEventListener('click', addSegment)

        // 获取当前播放时间按钮
        document
          .getElementById('setCurrentTimeAsStart')
          .addEventListener('click', setCurrentTimeAsStart)
        document
          .getElementById('setCurrentTimeAsEnd')
          .addEventListener('click', setCurrentTimeAsEnd)

        // 处理按钮
        processBtn.addEventListener('click', processVideo)

        // 下载按钮
        downloadBtn.addEventListener('click', downloadResult)

        // 重置按钮
        resetBtn.addEventListener('click', resetAll)

        // 拖放功能
        const dropArea = document.getElementById('fileDropArea')
        dropArea.addEventListener('dragover', (e) => {
          e.preventDefault()
          dropArea.classList.add('dragover')
        })

        dropArea.addEventListener('dragleave', () => {
          dropArea.classList.remove('dragover')
        })

        dropArea.addEventListener('drop', (e) => {
          e.preventDefault()
          dropArea.classList.remove('dragover')

          if (e.dataTransfer.files.length) {
            videoInput.files = e.dataTransfer.files
            handleFileUpload({ target: { files: e.dataTransfer.files } })
          }
        })
      }

      // 处理文件上传
      function handleFileUpload(event) {
        const file = event.target.files[0]
        if (!file) return

        // 检查文件类型
        if (!file.type.match('video.*') && !file.type.match('audio.*')) {
          showError('❌ 请上传视频或音频文件', errorMessage)
          return
        }

        inputFile = file
        videoUrl = URL.createObjectURL(file)

        // 显示原视频预览
        originalPreview.innerHTML = `
                <video controls style="border-radius: 15px;">
                    <source src="${videoUrl}" type="${file.type}">
                    您的浏览器不支持视频预览
                </video>
                <p style="text-align: center; padding: 15px 0; color: var(--text-secondary); font-weight: 500;">📁 ${
                  file.name
                } (${formatFileSize(file.size)})</p>
            `

        // 重置片段列表
        segments = []
        updateSegmentsList()

        // 启用处理按钮
        processBtn.disabled = false
        downloadBtn.disabled = true
        segmentStatus.textContent = '✨ 请添加要剪辑的时间段'
      }

      // 添加时间段
      function addSegment() {
        const start = parseFloat(startTimeInput.value)
        const end = parseFloat(endTimeInput.value)

        // 验证输入
        if (isNaN(start) || isNaN(end) || start < 0 || end < 0) {
          showError('❌ 请输入有效的时间值', segmentError)
          return
        }

        if (start >= end) {
          showError('❌ 结束时间必须大于开始时间', segmentError)
          return
        }

        if (!inputFile) {
          showError('❌ 请先上传视频文件', segmentError)
          return
        }

        // 检查重叠
        for (const seg of segments) {
          if (
            (start >= seg.start && start < seg.end) ||
            (end > seg.start && end <= seg.end) ||
            (start <= seg.start && end >= seg.end)
          ) {
            showError(
              `❌ 时间段与已添加的片段 (${seg.start}s-${seg.end}s) 重叠`,
              segmentError
            )
            return
          }
        }

        // 添加新片段
        segments.push({ start, end })
        segments.sort((a, b) => a.start - b.start)

        updateSegmentsList()
        segmentStatus.textContent = `✅ 已添加片段: ${start}s - ${end}s`
        segmentError.textContent = ''

        // 清空输入
        startTimeInput.value = ''
        endTimeInput.value = ''
      }

      // 更新片段列表显示
      function updateSegmentsList() {
        if (segments.length === 0) {
          segmentsList.innerHTML =
            '<p style="text-align: center; padding: 20px; color: var(--text-secondary); font-style: italic;">📭 暂无添加的片段</p>'
          return
        }

        segmentsList.innerHTML = ''
        segments.forEach((seg, index) => {
          const segElement = document.createElement('div')
          segElement.className = 'segment-item'
          segElement.style.animationDelay = `${index * 0.1}s`
          segElement.innerHTML = `
                    <div class="segment-times">🎬 ${
                      index + 1
                    }. ${seg.start.toFixed(1)}s - ${seg.end.toFixed(1)}s</div>
                    <div class="segment-actions">
                        <button data-index="${index}">🗑️ 删除</button>
                    </div>
                `
          segmentsList.appendChild(segElement)
        })

        // 添加删除按钮事件
        document.querySelectorAll('.segment-actions button').forEach((btn) => {
          btn.addEventListener('click', (e) => {
            const index = parseInt(e.target.getAttribute('data-index'))
            segments.splice(index, 1)
            updateSegmentsList()
            segmentStatus.textContent = '🗑️ 片段已删除'
          })
        })
      }

      // 处理视频剪辑
      async function processVideo() {
        if (!inputFile || segments.length === 0) {
          showError('❌ 请上传文件并添加至少一个剪辑片段', errorMessage)
          return
        }

        // 初始化FFmpeg
        try {
          statusMessage.textContent = '🚀 正在加载FFmpeg引擎...'
          statusMessage.classList.add('processing')
          errorMessage.textContent = ''
          processBtn.disabled = true
          downloadBtn.disabled = true

          if (!ffmpeg) {
            const { createFFmpeg, fetchFile } = FFmpeg
            ffmpeg = createFFmpeg({
              log: true,
            })

            // 监听日志输出以获取进度
            ffmpeg.setLogging(({ message }) => {
              if (message.startsWith('frame=')) {
                const match = message.match(/time=(\d+:\d+:\d+\.\d+)/)
                if (match) {
                  const time = match[1]
                  progressText.textContent = `⚡ 处理中: ${time}`
                }
              }
            })

            // 监听进度
            ffmpeg.setProgress(({ ratio }) => {
              const percent = Math.floor(ratio * 100)
              progressFill.style.width = `${percent}%`
              progressText.textContent = `🎯 处理中: ${percent}%`
            })

            await ffmpeg.load()
          }

          statusMessage.textContent = '🎬 正在处理视频...'
          const { fetchFile } = FFmpeg

          // 写入视频文件到虚拟文件系统
          const inputName =
            'input.' + (inputFile.type.includes('audio') ? 'mp3' : 'mp4')
          ffmpeg.FS('writeFile', inputName, await fetchFile(inputFile))

          // 构建FFmpeg命令 - 多段剪辑
          let filterComplex = ''
          segments.forEach((seg, i) => {
            filterComplex += `[0:v]trim=start=${seg.start}:end=${seg.end},setpts=PTS-STARTPTS[v${i}];`
            filterComplex += `[0:a]atrim=start=${seg.start}:end=${seg.end},asetpts=PTS-STARTPTS[a${i}];`
          })

          // 连接所有片段
          filterComplex += segments.map((_, i) => `[v${i}][a${i}]`).join('')
          filterComplex += `concat=n=${segments.length}:v=1:a=1[outv][outa]`

          // 执行FFmpeg命令
          await ffmpeg.run(
            '-i',
            inputName,
            '-filter_complex',
            filterComplex,
            '-map',
            '[outv]',
            '-map',
            '[outa]',
            '-c:v',
            'libx264',
            '-c:a',
            'aac',
            'output.mp4'
          )

          // 读取输出文件
          const data = ffmpeg.FS('readFile', 'output.mp4')
          outputBlob = new Blob([data.buffer], { type: 'video/mp4' })
          const outputUrl = URL.createObjectURL(outputBlob)

          // 显示结果预览
          resultPreview.innerHTML = `
                    <video controls style="border-radius: 15px;">
                        <source src="${outputUrl}" type="video/mp4">
                        您的浏览器不支持视频预览
                    </video>
                `

          statusMessage.textContent = '🎉 视频处理完成！'
          statusMessage.classList.remove('processing')
          progressText.textContent = '✅ 处理完成'
          progressFill.style.width = '100%'
          downloadBtn.disabled = false
        } catch (error) {
          console.error('处理失败:', error)
          showError(`❌ 处理失败: ${error.message}`, errorMessage)
          statusMessage.classList.remove('processing')
          processBtn.disabled = false
        }
      }

      // 下载结果
      function downloadResult() {
        if (!outputBlob) {
          showError('❌ 没有可下载的结果', errorMessage)
          return
        }

        const a = document.createElement('a')
        a.href = URL.createObjectURL(outputBlob)
        a.download = `剪辑结果_${new Date()
          .toISOString()
          .slice(0, 19)
          .replace(/:/g, '-')}.mp4`
        a.click()

        statusMessage.textContent = '📥 文件下载中...'
      }

      // 重置所有
      function resetAll() {
        if (confirm('🤔 确定要重置所有内容吗？')) {
          segments = []
          updateSegmentsList()

          if (videoUrl) {
            URL.revokeObjectURL(videoUrl)
            videoUrl = null
          }

          inputFile = null
          outputBlob = null
          videoInput.value = ''
          startTimeInput.value = '0'
          endTimeInput.value = '5'

          originalPreview.innerHTML =
            '<p style="text-align: center; padding: 60px 20px; color: var(--text-secondary); font-size: 1.1rem;">📺 视频预览区</p>'
          resultPreview.innerHTML =
            '<p style="text-align: center; padding: 60px 20px; color: var(--text-secondary); font-size: 1.1rem;">🎞️ 剪辑结果预览区</p>'

          processBtn.disabled = true
          downloadBtn.disabled = true
          statusMessage.textContent = ''
          statusMessage.classList.remove('processing')
          errorMessage.textContent = ''
          segmentStatus.textContent = ''
          segmentError.textContent = ''
          progressFill.style.width = '0%'
          progressText.textContent = '🚀 准备就绪'
        }
      }

      // 显示错误信息
      function showError(message, element) {
        element.textContent = message
        element.classList.add('error-shake')
        setTimeout(() => {
          element.classList.remove('error-shake')
        }, 500)
      }

      // 格式化文件大小
      function formatFileSize(bytes) {
        if (bytes === 0) return '0 Bytes'
        const k = 1024
        const sizes = ['Bytes', 'KB', 'MB', 'GB']
        const i = Math.floor(Math.log(bytes) / Math.log(k))
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
      }

      // 获取当前视频播放时间并设置为开始时间
      function setCurrentTimeAsStart() {
        const video = document.querySelector('#originalPreview video')
        if (!video) {
          showError('❌ 请先上传并播放视频', segmentError)
          return
        }

        const currentTime = video.currentTime
        startTimeInput.value = currentTime.toFixed(1)
        segmentStatus.textContent = `⏰ 已设置开始时间为: ${currentTime.toFixed(
          1
        )}秒`

        // 添加视觉反馈
        startTimeInput.style.background = 'rgba(78, 205, 196, 0.2)'
        setTimeout(() => {
          startTimeInput.style.background = ''
        }, 1000)
      }

      // 获取当前视频播放时间并设置为结束时间
      function setCurrentTimeAsEnd() {
        const video = document.querySelector('#originalPreview video')
        if (!video) {
          showError('❌ 请先上传并播放视频', segmentError)
          return
        }

        const currentTime = video.currentTime
        endTimeInput.value = currentTime.toFixed(1)
        segmentStatus.textContent = `⏱️ 已设置结束时间为: ${currentTime.toFixed(
          1
        )}秒`

        // 添加视觉反馈
        endTimeInput.style.background = 'rgba(78, 205, 196, 0.2)'
        setTimeout(() => {
          endTimeInput.style.background = ''
        }, 1000)
      }

      // 初始化
      initEvents()
    </script>
  </body>
</html>
